<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #area {
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #c0c0c0;
            cursor: pointer;
            cursor: 
        }
    </style>
</head>
<body>
    <div id="area"></div>
    <script>
       /* 2、
       1.在宽500px，高500px的div中，
       2.使用对象的方式创建随机小星星✨，
        3.要求每次点击，小星星的位置随机出现，一定要在500px*500px范围内，
        不得超出（html自我实现，小星星使用star.png图片，下图为2次随机出现小星星的位置）*/
        var area = document.getElementById('area');
        function Star(obj) {
            this.objArea = obj;
            this.init = function () {
                var img = document.createElement('img');
                img.src = "image/star.png";
                img.style.position = 'absolute';
                // 区域是500 减去 星星体积 28 等于 472px
                function areaPosition() {
                    img.style.left = Math.floor((Math.random() * 472) + 1) + 'px';
                    img.style.top = Math.floor((Math.random() * 472) + 1) + 'px';
                }
                areaPosition();
                this.objArea.appendChild(img);
                var that = this;
                // 每次点击area区域的时候再次初始化位置
                this.objArea.onclick = function () {
                    areaPosition();
                }
            }
        }
        var createStar = new Star(area);
        createStar.init();
    </script>
</body>
</html>